<template>
	<!-- 我的订单 -->
	<view class="page">
		<view class="">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view @click="tabClick(idx)"
					style="display: inline-block;color: #333333;padding: 5px 12px;margin-right: 0px;min-width: 25px;text-align: center;"
					v-for="(obj,idx) in tabs" :key="idx">
					<text>{{obj}}</text>
					<view style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex"></view>
				</view>
			</scroll-view>
		</view>
		<view style="flex: 1;overflow-y: auto;">
			<!-- cell -->
			<view style="background-color: #FFFFFF;padding: 12px;padding-bottom: 0;" v-for="idx in 10">
				<!-- orderid -->
				<view style="display: flex;flex-direction: row;align-items: center;">
					<text style="flex: 1;font-size: 12px;color: #666666;">订单编号:646448979797</text>
					<text style="font-size: 12px;color: #007AFF;">已支付</text>
				</view>
				<!-- goods -->
				<view style="display: flex;flex-direction: row;padding-top: 12px;">
					<image src="https://p3.toutiaoimg.com/img/pgc-image/c866fd558f81415c815aea93722b5240~tplv-tt-cs0:640:360.jpg" style="width: 72px;height: 72px;" mode=""></image>
					<view style="flex: 1;display: flex;padding-left: 12px;">
						<text style="font-size: 14px;margin-right: 5px;">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</text>
						<text style="font-size: 14px;">￥12.00</text>
					</view>
				</view>
				<!-- date total fee -->
				<view style="display: flex;align-items: center;flex-direction: row;padding-top: 12px;">
					<text style="font-size: 12px;color: #666666;">2020-09-91</text>
					<view style="flex: 1;display: flex;justify-content: flex-end;">
						<text style="font-size: 14px;color: #333333;">总价</text>
						<text style="font-size: 14px;color: #FF0000;">￥1236.00</text>
					</view>
				</view>
				<!-- button and time -->
				<view
					style="padding:12px 0;background-color: #FFFFFF;display: flex;align-items: center;flex-direction: row;">
					<view style="flex: 1;display: flex;align-items: center;">
						<text style="font-size: 12px;color: #FF0000;">20分21秒</text>
						<text style="font-size: 12px;color: #666666;margin-left: 2px;">后自动取消</text>
					</view>
					<view style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
						<view
							style="border-style: solid;border-width: 1px;border-color: #666666;padding: 5px 12px;display: flex;justify-content: center;align-items: center;">
							<text style="font-size: 14px;color: #333333;">取消订单</text>
						</view>
						<view style="width: 12px;" />
						<view
							style="text-align: center;padding: 5px 12px;background-color: #FF0000;display: flex;justify-content: center;align-items: center;">
							<text style="font-size: 14px;color: #FFFFFF;">去支付</text>
						</view>
					</view>
				</view>
				<!-- line -->
				<view style="height: 12px;background-color: #F5F5F5;" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					"全部",
					"待支付",
					"已支付",
					"已使用",
					"已取消",
				],
				tabindex: 0,
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			}
		}
	}
</script>

<style>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
	}

	.scroll-view_H {
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
		overflow: hidden;
		width: calc(100vw - 24px);
		background-color: #FFFFFF;
	}
</style>
